<!--  -->
<template>
  <a-upload
    list-type="picture-card"
    accept=".png,.jpg,.jpeg"
    :action="fileUrl"
    :headers="setHeaders"
    :multiple="mult"
    :file-list="fileList"
    @preview="previewFile"
    @change="handleChange"
  >
    <div v-if="allowUpload">
      <!-- <a-icon type="plus" /> -->
      <PlusOutlined />
      <div class="ant-upload-text">上传图片</div>
    </div>
  </a-upload>
</template>
<script setup lang="ts">
import "viewerjs/dist/viewer.css";
import { ref, defineProps, watch, computed } from "vue";
import { api as viewerApi } from "v-viewer";
import Viewer from "v-viewer";
import { PlusOutlined } from "@ant-design/icons-vue";
import type { UploadChangeParam } from "ant-design-vue";
const fileList: any = ref([]);
const Imglist: any = ref([]);
const props = withDefaults(
  defineProps<{
    pfileList: any;
    prefix?: string;
    num?: number;
    mult: boolean;
  }>(),
  {
    prefix: import.meta.env.VITE_APP_USER,
    num: 3,
    mult: false,
  }
);
watch(
  () => props.pfileList,
  (newval: any) => {
    console.log(newval);

    fileList.value = newval;
  },
  { immediate: true }
);
const setHeaders = computed(() => {
  let auth: any = localStorage.getItem("auth");
  auth = JSON.parse(auth);
  return {
    Authorization: auth.token_type + " " + auth.access_token,
    // Authorization: "authorization-text",
  };
});
const fileUrl = computed(() => {
  return `${props.prefix}/common/uploadFile`;
});
const sourcePreview = computed(() => {
  return import.meta.env.VITE_APP_BASE_IMGURL;
});
const allowUpload = computed(() => {
  console.log(fileList.value);

  return fileList.value.length < props.num;
});
const previewFile = (file: any) => {
  console.log("文件预览", file);
  const datas = fileList.value.map((item: any) => {
    if (item.response) {
      item = {
        url: import.meta.env.VITE_APP_BASE_IMGURL + item.response.msg,
        uid: item.uid,
        name: item.name,
        status: item.status,
      };
    }
    return item;
  });

  let index = -1;
  for (let i = 0; i < datas.length; i++) {
    if (datas[i].uid == file.uid) {
      index = i;
      break;
    }
  }

  const imgGroup = datas.map((res: any) => {
    const objs = {
      src: res.url,
      "data-source": res.url,
    };
    return objs;
  });
  console.log(imgGroup);
  const $viewer = viewerApi({
    options: {
      toolbar: true,
      url: "data-source",
      initialViewIndex: index,
    },
    images: imgGroup,
  });
};
const handleChange = (info: UploadChangeParam) => {
  console.log("文件改变", fileList);
  const datas = info.fileList.map((item) => {
    if (item.url && item.url.indexOf("http://") !== -1) {
      const index = item.url.indexOf("/file/");
      item = {
        url: item.url.substring(index),
        uid: item.uid,
        name: item.name,
        status: item.status,
      };
    }
    if (item.response) {
      item = {
        url: item.response.msg,
        uid: item.uid,
        name: item.name,
        status: item.status,
      };
    }

    return item;
  });
  Imglist.value = datas;
  fileList.value = info.fileList;
};
</script>
<style lang="scss" scoped>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: rgba(0, 0, 0, 0.65);
}
.anticon {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.65);
}
</style>
